<template>
     <div class="my-tag">
        <input
        class="input"
        type="text"
        v-if="edit" 
        v-focus
        @blur="edit = false" 
        @keydown.enter="confirm"
        v-model.trim="tag"
        placeholder="输入标签"
            />
            <div @dblclick="showEdit" v-else class="text">{{value}}</div>
            </div>
</template>

<script>
export default {
    props:{
        value:{
            type:String,
            required:true
        }
    },
    directives:{
    focus:{
    inserted(el){
    // 当指令绑定的元素插入到 DOM 上时获取焦点 
    el.focus()
    }
    }
    },
    data() {
        return {
        //是否处于编辑状态
        edit:false,
        tag:''
        };
    },
    methods: {
    showEdit(){
    //显示编辑框
    this.edit=true
    //数据回显
    this.tag=this.value 
    },
    confirm(){
        // 如果用没有输入任何内容,我就给个默认值
        if(this.tag === ''){
            this.tag='暂无'
        }
        // 当用户按下回车时触发该事件
        // 将用户输入的内容传递给父组件
     this.$emit('input',this.tag)
     this.edit=false
    }
  },
};
</script>

<style lang="less" scoped>
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>